<!-- eslint-disable vue/multi-word-component-names -->
<template>
    <div style="width: 100%; height: 810px; margin: 0 auto; background-color:rgb(247, 247, 247);">
        <div style="height: 90px;"></div>
        <div style="width: 960px; height: 670px; margin: 0 auto; background-color: rgb(255, 255, 255);">
            <div style="width: 960px; height: 82px; background-color: rgb(255, 255, 255);">
                <div style="height: 25px;"></div>
                <div style="font-size: 24px;">
                    - 开通VIP会员 -
                </div>
            </div>
            <div style="width: 600px; height: 63px; margin: 0 auto; background-color: rgb(255, 255, 255);">
                <div style="width: 400px; height: 21px; text-align: left;">
                    <span style="font-size: 14px; color: #666666;">购买账号：{{userInfo.frontDeskName}}</span><br>
                    <span style="font-size: 14px; color: #666666;" v-if="userInfo.frontDeskPhone === ''">手机号：未绑定</span>
                    <span style="font-size: 14px; color: #666666;" v-else>手机号：{{userInfo.frontDeskPhone}}</span>
                </div>
            </div>
            <div style="width: 600px; height: 1px; margin: 0 auto; background-color:rgb(247, 247, 247);"></div>
            <div style="height: 20px;"></div>
            <div  v-for="memberlist in memberList" :key="memberlist.id"  class="bordered-div" :class="{ 'selected': selected === memberlist }"  @click="toggleSelection(memberlist)">
                <!-- {{ item }} -->
                <div style="width: 70px; height: 17px; float: left; text-align: left; margin-left: 10px;">
                    <div style="height: 13px;"></div>
                    <span style="font-size: 16px; color: #333333;">{{ memberlist.duration }}个月</span>
                    <span style="font-size: 12px; color: #666666;">{{ (memberlist.price / memberlist.duration).toFixed(2) }}元/月</span>
                </div>
                <div style="width: 70px; height: 22px; float: right; margin-right: 10px;">
                    <div style="height: 13px;"></div>
                    <span style="font-size: 18px; color: #ff6600;">￥{{ memberlist.price }}</span><br>
                    <!-- <span style="text-decoration: line-through; font-size: 14px; color: #999999;">￥50.00</span> -->
                </div>
            </div>
            <div style="height: 80px;"></div>
            <div style="width: 960px; height: 203px; background-color: #faf5db;">
                <div style="width: 600px; height: 42px; margin-left: 385px;">
                    <div style="height: 20px;"></div>
                    <span style="font-size: 16px;">总计：</span>
                    <span style="font-size: 32px; color: #FF4400;">￥{{ payPrice }}</span>
                </div>
                <div style="width: 120px; height: 44px; margin-left: 300px; margin-top: 40px;">
                  <img src="../../assets/支付宝2.png" alt="">
                </div>
                <div style="width: 160px; height: 44px; margin-left: 600px; margin-top: -45px; background-color: #ff6600;">
                  <div style="height: 10px;"></div>
                  <div style="font-size: 18px; color: #fff;" @click="payMentByUser">立即支付</div>
                </div>
                <div style="width: 320px; height: 14px; margin-left: 400px; margin-top: 30px;">
                  <div style="font-size: 12px; color: #666666;">支付遇到问题？联系云课堂客服获得帮助。</div>
                </div>
            </div>
            <div style="width: 958px; height: 31px;">
              <div style="height: 10px;"></div>
              <span style="color: #49AF4F; font-size: 14px; cursor: pointer;" @click="handelEdit">《智学IT课堂会员服务协议》</span>
            </div>
        </div>
        <el-dialog title="智学IT课堂VIP会员使用协议" :visible.sync="dialogFormVisible" width="50%">
          <div style="text-align: left;">
<b>协议条款的确认和接纳</b>

<p>1.1 欢迎使用智学IT课堂VIP会员服务，请您仔细阅读以下全部内容（特别是粗体标注的内容）。本协议是您与智学IT课堂之间关于智学IT课堂VIP会员服务的条款，内容包括本协议正文、《智学IT课堂用户服务协议》、《智学IT课堂隐私政策》、本协议明确援引的其他协议及智学IT课堂已经发布的或将来可能发布的各类协议和规则。所有协议内容为本协议不可分割的组成部分，与本协议正文具有同等法律效力。除另行明确声明外，您使用智学IT课堂VIP会员服务的行为将受本协议约束。</p>

<p>1.2 您应该具备中华人民共和国法律规定的与您行为相适应的民事行为能力。若您不具备签署与您行为相适应的民事行为能力，请确保您的监护人同意您的所有行为，在此情况下，您及您的监护人应依照法律规定承担因此而导致的一切后果。如您选择“点击同意”本协议或者以其他方式开始使用智学IT课堂VIP会员权益功能服务，即表示已经与智学IT课堂达成协议，并自愿接受本协议的所有内容。</p>

<p>1.3 智学IT课堂有权根据法律规范及运营的合理需要，不断修改和完善本协议，并在智学IT课堂平台（study.163.com）公告。如您继续使用智学IT课堂VIP会员服务，即意味着同意并自愿遵守修改后的协议条款，亦或您有权终止使用。</p>

<b>1.   定义</b>

<p>1.1.  您：指经过付费选择特定类型的服务成为智学IT课堂VIP会员（以下简称“会员”）的云课堂用户。</p>

<p>1.2.  智学IT课堂平台（或智学IT课堂不时修改的其他名称，以下简称“云课堂”）：指由智学IT课堂所有和经营的，供智学IT课堂用户上传、查询、管理课程的数字内容聚合平台，旨在为云课堂用户提供课程教学内容的生成、传播和消费服务。</p>

<p>1.3.  VIP会员权益：指会员在注册成功后，根据向智学IT课堂支付对价，所获得的针对云课堂特定课程的优惠购买价格、课程免费观看资格、优惠券礼包及其他会员特有优惠权益，具体内容以智学IT课堂在云课堂官网、相关页面上发布的公告、规则为准（以下简称“会员权益”）。</p>

<p>1.4.  课程池：指对参与该会员权益合作的课程的总称。加入课程池的课程可以是免费对会员提供的，该类课程统称好课畅学课程池；也可以是以优惠价格对会员提供的，该类课程统称会员专享精品课程池。</p>

<b>2.   服务内容</b>

<p>2.1.  除非另有证明，智学IT课堂储存在其服务器上的数据是您享有会员权益的唯一有效证据。</p>

<p>2.2.  您可以选择不同的服务类型，包括但不限于月度会员、季度会员和年度会员，并支付相应的对价来获得不同的会员资格。</p>

<p>2.3.  会员资格的有效期根据您选择的服务类型确定。月度会员有效期为31天，季度会员有效期为93，年度会员有效期为365天，从开通日起计算。</p>

<p>2.4.  您在成为会员后，可以免费观看课程池内的好课畅学课程，也可以优惠价格购买课程池内的会员专享精品课程。</p>

<p>2.5.  会员资格有效期届满前，您可以通过续费来继续享受会员权益。有效期届满的，不影响您继续观看已经优惠购买会员专享精品课程池内的付费课程（但课程有时间限制的除外），但好课畅学课程池内的免费课程将无法继续观看。</p>

<b>3.   付费规则</b>

<p>3.1.  如果您希望获得会员权益，需要先登录或注册智学IT课堂账号。您在使用智学IT课堂会员服务时登录的账号是智学IT课堂确认您身份的唯一依据。</p>

<p>3.2.  您理解并同意：智学IT课堂提供的智学IT课堂会员权益实行先付款后使用的方式，您及时、足额、合法的支付所需的款项是您享受会员权益的前提。您有权选择使用智学IT课堂认可的支付方式，如果该支付方式由智学IT课堂之外具备合法资质的第三方提供，该等支付服务的使用条件及规范由您与支付服务提供方确定，与智学IT课堂认可无关。</p>

<p>3.3.  智学IT课堂将不对所提供的会员权益的适用性或满足您特定需求及目的进行任何明示或者默示的担保。请您在购买前确认自身的需求，同时仔细会员权益的详细说明。</p>

<p>3.4.  您理解并同意，会员权益属于在线虚拟服务内容，一旦购买成功，除法律规定的情形及本协议另有约定外，智学IT课堂不予退还已收取的费用。</p>

<p>3.5.  您知悉并同意，您购买的会员权益仅限于您自行使用，您无权对已购买的会员权益进行出售、转让、许可或其他方式使除您自己以外的第三方（包括但不限于自然人、法人或其他组织）使用已购买的会员权益。若您违反本条款规定，智学IT课堂有权视情况采取如下措施而无需承担任何责任：</p>

<p>3.5.1. 取消您继续享用会员权益的权利；</p>

<p>3.5.2. 限制、冻结、终止您的账号；</p>

<p>3.5.3. 要求您退还其通过出售、转让、许可等其他方式取得的收益；</p>

<p>3.5.4. 其他智学IT课堂认为可以采取的救济措施。</p>

<p>3.6.  您应保管好自己的账号和密码（包括但不限于登录/支付账号），如因您未保管好自己的账号和密码而对自己、智学IT课堂或第三方造成损害的，您将负全部责任。另外，您应对用户账号中的所有活动和事件负全责。</p>

<p>3.7.  您同意如果发现有非法使用您账号或出现安全漏洞的情况，应立即通告智学IT课堂，智学IT课堂将会尽力予以妥善解决。</p>

<b>4.   其他约定</b>

<p>4.1.  您理解并同意，本协议是您与智学IT课堂已达成共识的《智学IT课堂用户服务协议》或类似文件的补充协议，与该等协议的约定不一致之处，以本协议为准。本协议中未涉及的内容以《智学IT课堂用户服务协议》或类似文件的内容为准。</p>

<p>4.2.  智学IT课堂根据自身商业决策等原因可能会选择终止智学IT课堂会员服务功能。您同意智学IT课堂有权行使上述权利且不需对您或第三方承担任何责任。如有此等情形发生，智学IT课堂会采取公告或其他合适的形式通知您，并以您购买会员服务但未实际使用（即您付费购买会员服务后尚有剩余到期时间）的费用为限，将上述费用（如有）返还至您的购买账户中。除法律有明确规定的情况外，智学IT课堂有权不经您申请并直接为您办理退款。</p>

<p>4.3.  经国家行政或司法机关的生效法律文书确认您存在违法或侵权行为，或者智学IT课堂根据自身的判断，认为您的行为涉嫌违反《智学IT课堂用户服务协议》、本协议内容或智学IT课堂分不时公布的使用规则等内容，或涉嫌违反法律法规的规定的，则智学IT课堂有权中止、中断或终止向您提供服务，并无需向您退还任何费用以及不承担任何责任。</p>

<p>4.4.  智学IT课堂对不可抗力导致的损失不承担责任。本协议所指不可抗力包括但不限于：天灾、法律法规或政府指令的变更，因网络服务特性而特有的原因，例如境内外基础电信运营商的故障、 计算机或互联网相关技术缺陷、互联网覆盖范围限制、计算机病毒、黑客攻击等因素，及其他合法范围内的不能预见、不能避免并不能克服的客观情况。</p>

<p>4.5.  所有发给您的通知都可通过电子邮件、常规的信件或在智学IT课堂网站显著位置公告的方式进行传送。任何对本协议的修改，自修改后的协议在在智学IT课堂网站公布或以电子邮件、常规的信件等方式向您通知之日起生效。</p>

<p>4.6.  本协议自发布之日起生效并实施，构成您和智学IT课堂之间的共识。</p>

<p>4.7.  本协议适用中华人民共和国的法律（不含冲突法）。当本协议的任何内容与中华人民共和国法律相抵触时，应当以法律规定为准，同时相关内容将按法律规定进行修改或重新解释，而本协议其他部分的法律效力不变。</p>

<p>4.8.  凡因本协议引起的或与本协议有关的任何争议,双方应协商解决。协商不成时，任何一方均可向被告所在地有管辖权的人民法院提起诉讼。</p>

<p>4.9.  如您对本协议内容有任何疑问，请发送邮件至我们的客服邮箱：study@service.netease.com。</p>
          </div>
        </el-dialog>
    </div>
</template>

<script>

export default {
  data () {
    return {
      userInfo: {},
      memberNumber: '',
      memberId: '',
      selected: null,
      memberList: [],
      payPrice: '',
      loginId: '',
      frontDeskName: '',
      frontDeskPhone: '',
      dialogFormVisible: false,
      memberName: ''
    }
  },
  created () {
    // 获取用户存储的信息
    this.userInfo = JSON.parse(localStorage.getItem('user'))
    if (this.userInfo) {
      this.userInfo = this.userInfo.data
      this.loginId = this.userInfo.id
    }
    this.getMemberList()
  },
  methods: {
    getMemberList () {
      this.$axios.post('/memberType/getMemberList').then((res) => {
        this.memberList = res.data.data
      })
    },
    handelEdit () {
      this.dialogFormVisible = true
    },
    toggleSelection (memberlist) {
      this.selected = memberlist === this.selected ? null : memberlist
      this.payPrice = memberlist.price
      this.memberId = memberlist.id
      this.memberName = memberlist.memberName
    },
    payMentByUser () {
      if (this.payPrice !== '') {
        const formData = new FormData()
        formData.append('userId', this.loginId)
        formData.append('memberId', this.memberId)
        formData.append('payPrice', parseFloat(this.price))
        // 生成订单
        this.$axios.post('/memberShip/generateOrder', formData).then((res) => {
          // 传回订单号
          this.memberNumber = res.data.data
          // 调用 payMentByAli() 支付方法
          this.payMentByAli()
        })
      }
    },
    payMentByAli () {
      const url = 'http://localhost:15000/alipay/pay?memberNumber=' + this.memberNumber + '&payPrice=' + this.payPrice + '&memberName=' + this.memberName
      window.open(url)
    }
  }
}
</script>

<style scoped>
.bordered-div {
    width: 600px; height: 70px; margin: 0 auto; border: 2px solid #eee; cursor: pointer; background: #ffffff;user-select: none;
}
.selected {
  border-color: #3FB967; /* 选中时的边框颜色 */
  background-color: #c0e6ca; /* 选中时的背景颜色 */
}
</style>
